<template>
  <div id="myChart" class="chart"></div>
</template>

<script>
import Util from "@/assets/js/util";
import { workChart } from "@/api/workChart/workChart";
export default {
  props: {
    ptime: {
      type: String,
    },
  },
  watch: {
    ptime(newValue, oldValue) {
      this.getSankey();
    },
  },
  data() {
    return {};
  },
  computed: {
    chartSankey() {
      return this.$echarts.init(Util.getDom("myChart"));
    },
  },
  methods: {
    getSankey() {
      var par;
      par = {
        ptime: this.ptime + "",
        pqyid: Number(localStorage.getItem("companyId")),
      };
      workChart(par).then((res) => {
        let data = res.data.data;
        let links = res.data.links;
        this.chartSankey.setOption({
          title: {
            text: "业务统计",
            top: "2%",
          },
          tooltip: {
            trigger: "item",
            triggerOn: "mousemove",
          },
          series: [
            {
              type: "sankey",
              data: data,
              links: links,
              top: "10%",
              emphasis: {
                focus: "adjacency",
              },
              levels: [
                {
                  depth: 0,
                  itemStyle: {
                    color: "#fbb4ae",
                  },
                  lineStyle: {
                    color: "source",
                    opacity: 0.6,
                  },
                },
                {
                  depth: 1,
                  itemStyle: {
                    color: "#b3cde3",
                  },
                  lineStyle: {
                    color: "source",
                    opacity: 0.6,
                  },
                },
                {
                  depth: 2,
                  itemStyle: {
                    color: "#ccebc5",
                  },
                  lineStyle: {
                    color: "source",
                    opacity: 0.6,
                  },
                },
                {
                  depth: 3,
                  itemStyle: {
                    color: "#decbe4",
                  },
                  lineStyle: {
                    color: "source",
                    opacity: 0.6,
                  },
                },
                {
                  depth: 4,
                  itemStyle: {
                    color: "#ea7ccc",
                  },
                  lineStyle: {
                    color: "source",
                    opacity: 0.6,
                  },
                },
              ],
              lineStyle: {
                curveness: 0.5,
              },
              width: "86%",
            },
          ],
        });
      });
    },
  },
  mounted() {
    this.getSankey();
  },
};
</script>

<style scoped lang="less">
</style>